<template>
  <el-row type="flex" justify="center" style="margin-top: 30px">
    <el-col :span="12">
      <el-form ref="form" :model="reqParams" :rules="rules" label-width="70px">
        <el-form-item label="姓名：" prop="username">
          <el-input v-model="reqParams.username" style="width: 70%" />
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="reqParams.password" type="password" disabled style="width: 70%" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateInfo">更新</el-button>
          <el-button @click="hGetUserDetailById">取消</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import { getUserDetailById } from '@/api/user'
import { saveUserDetailById } from '@/api/employees'
export default {
  data() {
    return {
      reqParams: {
        username: '', // 姓名
        password: '' // 密码
      },
      id: this.$route.query.id, // 员工id
      rules: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.hGetUserDetailById()
  },
  methods: {
    // 获取员工信息
    async hGetUserDetailById() {
      const { username, password } = await getUserDetailById(this.id)
      this.reqParams.username = username
      this.reqParams.password = password
    },
    // 更新账户
    updateInfo() {
      this.$refs.form.validate(async(valid) => {
        if (valid) {
          await saveUserDetailById({ ...this.reqParams, id: this.id })
          this.$message.success('更新成功！')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
